<template>
<el-container>
  <el-header>
    <el-menu class="el-menu-demo" mode="horizontal" router>
      <el-menu-item class="topLog" style="padding: 0">
        <h3>街圈文化后台管理</h3>
      </el-menu-item>
      <el-menu-item style="padding-top: 20px"><div>
          <!--面包屑-->
          <Breadcrumb />
        </div></el-menu-item>
      <el-menu-item style="float: right">
        <div>
          <el-dropdown placement="bottom">
            <span class="el-dropdown-link">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-edit">修改密码</el-dropdown-item>
              <el-dropdown-item icon="el-icon-user">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-menu-item>
    </el-menu>
  </el-header>
  <el-container>
  <el-aside>
    <el-row class="tac" style="width: 200px">
        <el-menu
          background-color="#333333"
          text-color="#fbfbfb"
          router
          default-active="activePath"
          class="el-menu-vertical-demo siderHeight"
          @open="handleOpen"
          @close="handleClose">
          <el-menu-item index="/index" @click="saveActiveNav('/index')">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/video">
            <template slot="title">
              <i class="el-icon-video-camera"></i>
              <span>视频</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/video/videoIndex" @click="saveActiveNav('/video/videoIndex')">视频上传</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/course">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">课程</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/course/chengRen" @click="saveActiveNav('/course/chengRen')">成人班</el-menu-item>
              <el-menu-item index="/course/shaoEr" @click="saveActiveNav('/course/shaoEr')">少儿班</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/other/match" @click="saveActiveNav('/other/match')">
            <i class="el-icon-document"></i>
            <span slot="title">赛事</span>
          </el-menu-item>
          <el-submenu>
            <template slot="title">
              <i class="el-icon-office-building"></i>
              <span slot="title">工作室</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/backendStudio/studioInfo" @click="saveActiveNav('/backendStudio/studioInfo')">工作室信息</el-menu-item>
              <el-menu-item index="/backendStudio/studioMember" @click="saveActiveNav('/backendStudio/studioMember')">工作室人员</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/other/userManage" @click="saveActiveNav('/other/userManage')">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>
    </el-row>
  </el-aside>
    <el-container>
      <el-main>
        <div>
          <!--使用router-view显示主要页面-->
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</el-container>
</template>
<script>
import Breadcrumb from "../components/Breadcrumb.vue";

export default {
  components: {Breadcrumb},
    data() {
      return {
        activePath: "",
        disabled: '',
      }
    },
    methods: {
      saveActiveNav(activePath) {
        sessionStorage.setItem('activePath', activePath);
        this.activePath = activePath
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
.siderHeight {
  height: 90vh;
}
.topLog {
  position: relative;
  top: -15px;
  width: 200px;
  margin: 0 !important;
}
/* 点击出来的下划线进行隐藏 */
.el-menu-item.is-active {
  border-bottom: #EBEEF5 !important;
  color: #5691c8 !important;
  border-bottom: none;
  text-decoration: none;
}
.el-submenu.is-active{
  border-bottom: none;
  text-decoration: none;
}
.el-footer {
  color: #D7DDE8;
  text-align: center;
  line-height: 60px;
}

.el-footer:hover {
  color: #2661ef;
}
.el-main {
  background-color: #ededed;
  border-radius: 0 0 20px 0;
}
.el-header {
  padding: 0;
  border-radius: 20px 20px 0 0;
}
.el-aside {
  border-radius: 0 0 0 20px;
  height: 90vh;
  width: 200px !important;
}
h3 {
  color: #cccccc;
  border-radius: 20px 0 0 0;
  text-align: center;
  background-color: #333333;
  width: 199px;
}
</style>
